import React, { FC, useState } from 'react';
import { Card, Form, Select, InputNumber, Button, Radio, Row, Col, Alert, Space } from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { Option } = Select;

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8 },
};

const QIANGDUBILI = 24;
const ZHUANJING1 = 17.1428571428571;
const ZHUANJING2 = 12.6315789473684;
const B8 = 0.170016759087656; // 根据模板变动，暂时使用定值
const D8 = 0.456107496149376; // 根据模板变动，暂时使用定值
const RATE = 6.44346381693164; // 根据模板变动，暂时使用定值
const MUBANJISU = 4.05; //根据模板变动，暂时使用定值

const Calc: FC = () => {
    const [result, setResult] = useState('');
    const [form] = Form.useForm();
    // 最终计算
    const onAChange = () => {
        const { jichugongji, qiangdu, chiyu } = form.getFieldsValue(['jichugongji', 'qiangdu', 'chiyu']);
        const chiyuRate = chiyu === 1 ? 0.01 : 0;
        if (jichugongji && qiangdu) {
            const result = jichugongji * (1 + qiangdu * 0.01 / QIANGDUBILI + chiyuRate);
            form.setFieldsValue({ zuizhong: result });
        }
    }
    // dps计算
    const computeResult = (values: any) => {
        const { zuizhong, zhuanjing, zhuanzhu, huixin, jisu } = values;
        const zhuanzhu1 = zhuanzhu / 100;
        const huixin1 = huixin / 100;
        const qiwang = zuizhong * (1 + B8 * zhuanjing * 0.01 / ZHUANJING1 + D8 * zhuanjing * 0.01 / ZHUANJING2) * (0.3 * (1 - zhuanzhu1) + zhuanzhu1 * (1 + 0.6 * huixin1));
        const oriResult = qiwang * RATE;
        //急速收益
        const mubanjisu1 = 60 / (1 + MUBANJISU / 100) * 5 + 1.25 * 2 + 10;
        const mubanJisu2 = 1 / (1 + MUBANJISU / 100);
        const muban = mubanjisu1 / mubanJisu2 * 7;
        const selfjisu1 = 60 / (1 + jisu / 100) * 5 + 1.25 * 2 + 10;
        const selfJisu2 = 1 / (1 + jisu / 100);
        const self = selfjisu1 / selfJisu2 * 7;
        const timeyingzi = (muban - self) / 25;
        const yingzi = zuizhong * 2.518072 * 0.91 * 1.5 * (zhuanjing / ZHUANJING2 / 100 + 1) * (zhuanzhu1 * (huixin1 * 1.6 + (1 - huixin1) * 1) + (1 - zhuanzhu1) * 0.3) * 1.05;
        const mubanjisu3 = 2.4 / (1 + MUBANJISU / 100) * 0.64 + 1;
        const selfjisu3 = 2.4 / (1 + jisu / 100) * 0.64 + 1;
        const timejuanyun = ((mubanjisu1 - selfjisu1) - (mubanjisu3 - selfjisu3) * 41) / (selfjisu3 - mubanjisu3 + selfjisu3);
        const juanyun = zuizhong * 6.22341937278774 * (0.004252618 * 29 + 1) * (zhuanjing / ZHUANJING1 / 100 + 1) * (zhuanzhu1 * (huixin1 * 1.6 + (1 - huixin1) * 1) + (1 - zhuanzhu1) * 0.3) * 1.05;
        const result = ((oriResult * mubanjisu1 - timeyingzi * yingzi - timejuanyun * juanyun) / selfjisu1).toFixed(3);
        setResult(result);
    }
    return (
        <Space direction="vertical" size='middle' style={{ width: '100%' }}>
            <Alert message="斩风天下第一！斩风天下第一！斩风天下第一！" type="success" />
            <Card>
                <Form {...layout} form={form} onFinish={computeResult}>
                    <FormItem
                        label='流派'
                        name='school'
                        initialValue={1}
                    >
                        <Select>
                            <Option value={1}>影王</Option>
                            <Option disabled value={2}>豪王</Option>
                        </Select>
                    </FormItem>
                    <FormItem
                        label='基础攻击'
                        name='jichugongji'
                        rules={[
                            { required: true, message: '请填写基础攻击值' }
                        ]}
                    >
                        <InputNumber onChange={onAChange} placeholder='注意是基础攻击，不是最终攻击' style={{ width: '100%' }} min={0} precision={0}></InputNumber>
                    </FormItem>
                    <FormItem
                        label='强度'
                        name='qiangdu'
                        rules={[
                            { required: true, message: '请填写强度值' }
                        ]}
                    >
                        <InputNumber onChange={onAChange} style={{ width: '100%' }} min={0} precision={0}></InputNumber>
                    </FormItem>
                    <FormItem
                        label='赤羽强度'
                        name='chiyu'
                        initialValue={2}
                    >
                        <RadioGroup onChange={onAChange}>
                            <Radio value={1}>有1%强度buff</Radio>
                            <Radio value={2}>无buff</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem
                        label='最终攻击'
                        name='zuizhong'
                    >
                        <InputNumber style={{ width: '100%' }} precision={4} disabled></InputNumber>
                    </FormItem>
                    <FormItem
                        label='专精'
                        name='zhuanjing'
                        rules={[
                            { required: true, message: '请填写专精值' }
                        ]}
                    >
                        <InputNumber style={{ width: '100%' }} min={0} precision={0}></InputNumber>
                    </FormItem>
                    <FormItem
                        label='专注'
                        name='zhuanzhu'
                        rules={[
                            { required: true, message: '请填写专注值' }
                        ]}
                    >
                        <InputNumber
                            style={{ width: '100%' }}
                            min={0} max={100}
                            precision={1}
                            formatter={value => `${value}%`}
                            parser={value => value ? value.replace('%', '') : ''}
                        ></InputNumber>
                    </FormItem>
                    <FormItem
                        label='会心'
                        name='huixin'
                        rules={[
                            { required: true, message: '请填写会心值' }
                        ]}
                    >
                        <InputNumber
                            style={{ width: '100%' }}
                            min={0} max={100}
                            precision={1}
                            formatter={value => `${value}%`}
                            parser={value => value ? value.replace('%', '') : ''}
                        ></InputNumber>
                    </FormItem>
                    <FormItem
                        label='急速'
                        name='jisu'
                        rules={[
                            { required: true, message: '请填写急速值' }
                        ]}
                    >
                        <InputNumber
                            style={{ width: '100%' }}
                            min={0}
                            precision={2}
                            formatter={value => `${value}%`}
                            parser={value => value ? value.replace('%', '') : ''}
                        ></InputNumber>
                    </FormItem>
                    <FormItem
                        label=' '
                        colon={false}
                    >
                        <Button type='primary' htmlType='submit'>计算</Button>
                    </FormItem>
                </Form>
            </Card>
            {
                result && (
                    <Card>
                        <Row style={{ fontSize: 18 }}>
                            <Col span={20} offset={4}>您的属性可以打到：<span style={{ fontStyle: 'oblique', color: '#52c41a' }}>{result}</span>  点DPS</Col>
                        </Row>
                    </Card>
                )
            }
        </Space>
    )
};

export default Calc;